import React, { Component } from 'react';
import './index.css';

class Footer extends Component {
    handleChange = (e) => {
        this.props.changeSelect(e.target.checked);
    }
    handleClear = () => {
        this.props.handleClear();
    }
    render() {
        const { todos, changeSelect} = this.props;

        // const todosDone = todos.filter((todo) => { return todo.done === true }).length;
        // reduce(callback, initialValue); reduce专门计数, 用reduce性能更好
        const todosDone = todos.reduce((prev, cur) => {
            // console.log(prev);
            return ( prev + (cur.done ? 1 : 0));
        }, 0);
        const todosAll = todos.length;

        return (
            <div className='todo-footer'>
                <label>
                    <input type="checkbox" onChange={this.handleChange} checked={todosDone === todosAll && todosAll != 0 ? true : false}/>
                </label>
                <span>
                    已完成{todosDone}   /   全部{todosAll}
                </span>
                <button onClick={this.handleClear} className='btn btn-danger'>清除已完成任务</button>
            </div>
        );
    }
}

export default Footer;